<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>

<body>

  <div class="box"></div>

  <script>

    function debounce(func, wait, { leading = false, trailing = true } = {}) {
      let timeout = null;
      let lastArgs;

      return function (...args) {
        lastArgs = args; // 始终保存最新参数

        if (timeout) {
          clearTimeout(timeout);
        } else if (leading) {
          // 首次触发且需要 leading 时立即执行
          func.apply(this, args);
        }

        timeout = setTimeout(() => {
          if (trailing) {
            func.apply(this, lastArgs);
          }
          timeout = null; // 重置状态
        }, wait);
      };
    }

    // 一步一步拆析debounce

    // 如果leading=true,
    // 那么最初就执行,
    // (1)如何判断最初: timeout=null
    // 除了第一次，后面每次触发都会清空定时器，重新设置


    
    const debounceClick = debounce(() => {
      console.log('333')
    }, 1000, {
      leading: true,
      trailing: true,
      // maxWait: 3000
    })

    document.querySelector('.box').onclick = () => {
      debounceClick()
    }


  </script>
</body>

</html>
